<template>
  <div>
    <ul class="weather_list">
      <li v-for="(item,index) in weather_list" :key="index">
        <div class="img-box"></div>
        <img :src="item.day_weather_pic" alt="">
        <div>星期{{item.weekday}}</div>
        <div>温度{{item.night_air_temperature}}℃～{{item.day_air_temperature}}℃</div>
        <div>日出落时间{{item.sun_begin_end}}</div>
        <div>紫外线强度{{item.ziwaixian}}</div>
        <div>天气{{item.day_weather}}</div>
        <div>降水概率{{item.jiangshui}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';

export default {
  name: 'home',
  data () {
    return {
      weather_list: []
    };
  },
  created () {
    this.getWeather();
  },
  methods: {
    ...mapMutations({
      setLang: 'SET_LANG'
    }),
    getWeather () {
      this.$api.post('/api/weather/weather.php', null, r => {
        let i = 1;
        while (r.data['f' + i]) {
          this.weather_list.push(r.data['f' + i]);
          i++;
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.weather_list
  display flex
  >li
    flex 1
    border-right 1px solid #ccc
    padding 20px
    font-size 14px
    &:last-child
      border 0
</style>
